<template>
  <el-dialog
    title="编辑权限组"
    :visible="showDialog"
    @close="handleClose"
    @open="setCheckedKeys"
  >
    <!-- 表单 -->
    <el-form
      ref="addRef"
      label-width="120px"
      :model="editForm"
      :rules="addFormRules"
    >
      <el-form-item label="用户名" prop="title">
        <el-input
          v-model="editForm.title"
          style="width: 80%"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="权限分配">
        <!-- 树形组件 -->
        <el-tree
          ref="tree"
          :props="{ label: 'title' }"
          :data="treeData"
          default-expand-all
          node-key="id"
          show-checkbox
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click.stop="handleClose">取消</el-button>
      <el-button type="primary" @click="getCheckedKeys">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { resetPermissionAPI, getPermissionInfoAPI } from '@/api/permissions'
export default {
  name: 'EditPermision',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 修改权限信息表单
    editForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: [],
      // 权限数据
      treeData: [],
      // 表单校验规则
      addFormRules: {
        title: [
          {
            required: true,
            message: '请输入用户名，此信息必须填写',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.setCheckedKeys()
  },
  methods: {
    // 修改用户
    async getCheckedKeys() {
      // console.log(this.$refs.tree.getCheckedKeys())
      this.editForm.permissions = this.$refs.tree.getCheckedKeys()
      try {
        // 整体校验
        // 发起新增请求
        await resetPermissionAPI(this.editForm)
        // 关闭弹框
        this.handleClose()
        // 获取员工列表
        //   this.$parent.getEmpioyeeList()
        //  推荐子传父
        this.$emit('add-success')
        //   成功提示
        this.$message.success('修改成功😀')
      } catch (error) {
        console.log(error)
      }
    },
    // 弹窗打开时
    async setCheckedKeys() {
      // 获取权限组列表
      await this.$store.dispatch('permission/getPermissionTree')
      this.treeData = this.$store.state.permission.perDate
      // console.log(this.treeData)
      // 回显
      console.log('editform', this.editForm)
      const { data } = await getPermissionInfoAPI(this.editForm)
      this.formData = data
      console.log('form', this.formData)
      console.log('permissions', this.formData.permissions)
      // 如果permissions里第一个数组的值为null则进行删除，否则会影响回显
      if (this.formData.permissions[0] === null) {
        this.formData.permissions.shift()
      }
      // 如果permissions有值，则给树形结构做回显
      if (this.formData.permissions.length) {
        this.$refs.tree.setCheckedKeys(this.formData.permissions)
      } else {
        this.$message.warning('权限数组为空🤔，请联系管理员检查数据')
      }
    },
    // 关闭弹窗
    async handleClose() {
      this.$refs.addRef.validate(async (valid) => {
        if (!valid) return
        // await this.$confirm(
        //   '此操作会清空已编辑数据，确定退出编辑吗？',
        //   '温馨提示',
        //   {
        //     type: 'warning'
        //   }
        // )
        this.$emit('update:showDialog', false)
        await this.$refs.addRef.resetFields()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
